
<template>
	<view >
		<scroll-view scroll-y class="page">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">缴费</block>
			</cu-custom>
			<!-- list列表 -->
			<view style="padding: 0 10px 0  10px;">
			<view class="cu-list menu" >

				<view class="cu-item animation-slide-bottom" style="margin-top: 10px;" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
						<text class="text-grey">应缴金额</text>
					</view>
					<view class="action">
						<view class="text-red" style="font-size: 32upx;">{{payData.accInfo.realFee}}</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu">

				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
					<view class="content">
						<text class="text-grey">缴费账号</text>
					</view>
					<view class="action">
						<text class="text-grey">{{payData.accInfo.accCode}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
					<view class="content">
						<text class="text-grey">账号名称</text>
					</view>
					<view class="action">
						<text class="text-grey">{{payData.accInfo.accName}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
					<view class="content">
						<text class="text-grey">费用金额</text>
					</view>
					<view class="action">
						<text class="text-grey">{{payData.arrearMoney}}</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="text-grey">账号余额</text>
					</view>
					<view class="action">
						<text class="text-grey">{{payData.accInfo.accBalance}}</text>
					</view>
				</view>
			</view>
			<view class="cu-list menu" v-if="payData.feesInfo.length>0">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.9s'}]">
					<view class="content">
						<text class="text-grey">费用明细</text>
					</view>
					<view class="action">
						 <a @click="() => toggleStatus = !toggleStatus" style="float: right; margin-top: 10px">
						              <!-- {{ toggleStatus ? '收起' : '展开' }} -->
									   <uni-icons :type="toggleStatus ? 'bottom' : 'top'" size="26"/>
						  </a>
					</view>
				</view>

				<view class="cu-list menu" v-for="(item, index) in payData.feesInfo" :key="index">

					<view class="cu-item animation-slide-bottom" style="background-color:#e2f1ed" >
						<view class="content">
							<text class="text-grey">{{item.readMonth}}</text>
						</view>
						<view class="action">
							<text class="text-grey">￥{{item.money}}</text>
						</view>
					</view>

					<uni-table ref="table" :loading="loading" border stripe
						emptyText="暂无更多数据"  >
						<uni-tr style="font-size: 12px;">
							<uni-th  align="center">用户号</uni-th>
							<uni-th  align="center">月份</uni-th>
							<uni-th  align="center">起度</uni-th>
							<uni-th  align="center">止度</uni-th>
							<uni-th  align="center">水量</uni-th>
							<uni-th  align="center">水费</uni-th>
							<uni-th  align="center">污水费</uni-th>
							<uni-th  align="center">垃圾费</uni-th>
							<uni-th  align="center">违约金</uni-th>
							<uni-th  align="center">合计</uni-th>
						</uni-tr>
						<uni-tr  style="text-align: center">
							<uni-td>
								<view align="center" class="name">{{item.cusCode}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.readMonth}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.beginScale}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.endScale}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.amount}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.totalMoney}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.wuMoney}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.ljMoney}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.penalty}}</view>
							</uni-td>
							<uni-td>
								<view align="center" class="name">{{item.arrearMoney}}</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</view>
			</view>
		</view>
		<view style="padding: 0 10px 0  10px;">
			<view class="cu-list menu" >
				<view class="cu-item animation-slide-bottom" style="margin-top: 10px;" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
						<text class="text-red">缴费金额</text>
					</view>
					<view class="action">
						<input class="text-red" placeholder="请输入缴费金额" name="input" v-model="payData.accInfo.payFee"></input>
					</view>
				</view>
			</view>
		</view>
		<view class="padding flex flex-direction" v-if="!loading">
			<button class="cu-btn bg-green lg"  @click="onSubmit">确认缴费</button>
		</view>
		<!-- 登录加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/water.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">支付中...</view>
		</view>
		</scroll-view>
	</view>

</template>

<script>
	import api from '@/api/api.js'
	export default {
		components:{
		 },
		data() {
			return {
				toggleStatus: false,
				loading: false,
				payData:{
					accInfo:{
						accCode:'',
						accName:'',
						accBalance:'',
						realFee:0,
						payFee: 0,
					},
					arrearMoney:0,
					feeNumber:'',
					feesInfo:[]
				},
				feeParams:{accCode:''},
				payUrl:'/chg/chgArrears/feesList',
				payOrder:'/chg/mp/createOrder',
				payQueryOrder:"/chg/mp/queryOrder"
			};
		},
		onLoad() {
			// this.selectedIndexs = []
			// this.getData(1)
		},
		created(){
			this.feeParams=this.$Route.query;
			// alert("accCode:"+this.feeParams.accCode)
			this.loadinfo();
		},
		methods: {
			loadinfo(){
				//console.log("query:",this.feeParams);
				this.$http.get(this.payUrl,{params:{accCode:this.feeParams.accCode}}
					).then(res=> {

					if (res.data.success) {
						this.payData = res.data.result;
						// alert("payData:")
						// alert(this.payData)
						// alert(this.payData.arrearMoney)
						if(this.payData.arrearMoney > 0){
							let rePay = this.payData.arrearMoney - this.payData.accInfo.accBalance;
							if(rePay > 0){
								rePay=rePay.toFixed(2);
								this.payData.accInfo.realFee = rePay;
								this.payData.accInfo.payFee =rePay;
							}else{
								this.payData.accInfo.realFee = 0.0;
							}
						}else{
							this.payData.accInfo.realFee = 0.0;
						}
					}else{
						this.payData.accInfo.realFee = 0.0;
					}
				}).catch(e=>{
					console.log("请求错误",e)
					uni.removeStorageSync(ACCESS_TOKEN)
					this.$tip.alert("会话异常，请重新进入");
				})
			},
			onSubmit(){
				//授权目录 https://mwsgzh.usw.cn/pages/mp/fee/
				//console.log("query:",this.feeParams);
				let arrearIdArr=[];
				if(this.payData.feesInfo.length>0){
					this.payData.feesInfo.forEach(function(a){
						arrearIdArr[arrearIdArr.length]=a.id;
					})
				}
				if(this.payData.accInfo.payFee>0){
					this.loading=true;
					let param={accCode:this.feeParams.accCode,
								arrearIds: arrearIdArr,
								payFee: this.payData.accInfo.payFee, //付款实付
								realFee: this.payData.accInfo.realFee, //实缴：应收-余额
								receFee: this.payData.arrearMoney};	//应缴：欠费金额，账单金额
					this.$http.post(this.payOrder,param).then(res=> {
						this.loading=false;
						if (res.data.success) {
							this.WeixinJs(res.data.result,param);
							// this.payData = res.data.result;
						}else{
							this.$message.success(res.data.message);
						}
					}).catch(e=>{
						this.loading=false;
						console.log("请求错误",e)
					})
				}else{
					this.$tip.alert("缴费金额必须大于0");
				}
				//this.$tip.success('该账号公众号暂未开通支付!')
			},
			onQuery(queryParam){
				this.$http.post(this.payQueryOrder,queryParam).then(res=> {
					if (res.data.success) {
						this.loadinfo();
						this.$message.success(res.data.message);
					}else{
						this.$message.error(res.data.message);
					}
				}).catch(e=>{
					console.log("请求错误",e)
				})
			},
			// 微信支付
			onBridgeReady(payData,param) {
			  let that = this;
			  // 后台支付签名接口
				  WeixinJSBridge.invoke(
					"getBrandWCPayRequest",
					{
					  appId: payData.appId, // 微信的appid
					  timeStamp: payData.timeStamp, //时间戳
					  nonceStr: payData.nonceStr, //随机串
					  package: payData.package,  // 订单号
					  signType: payData.signType, //微信签名方式：
					  paySign: payData.paySign //微信签名
					},
					function(res) {
						//alert("唤醒支付后结果："+res)
					  if (res.err_msg == "get_brand_wcpay_request:ok") {
						// 使用以上方式判断前端返回,微信团队郑重提示：
						//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						console.log(res);
						//that.$message.success("支付成功");
						let queryParam=param;
						queryParam.package=payData.package;

						that.$http.post(that.payQueryOrder,queryParam).then(res=> {
							if (res.data.success) {
								that.loadinfo();
								that.$message.success(res.data.message);
							}else{
								that.$message.error(res.data.message);
							}
						}).catch(e=>{
							console.log("请求错误",e)
						})
					  } else {
						that.$message.error("支付失败，请重新支付");
					  }
					}
				  );
			},
			// 微信支付
			WeixinJs(payData,param) {
			  if (typeof WeixinJSBridge == "undefined") {
				if (document.addEventListener) {
				  document.addEventListener(
					"WeixinJSBridgeReady",
					this.onBridgeReady(payData,param),
					false
				  );
				} else if (document.attachEvent) {
				  document.attachEvent("WeixinJSBridgeReady", this.onBridgeReady(payData,param));
				  document.attachEvent("onWeixinJSBridgeReady", this.onBridgeReady(payData,param));
				}
			  } else {
				this.onBridgeReady(payData,param);
			  }
			}
		}
	}
</script>

<style>
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}
	.padding0{
		padding: 0px;
	}

</style>
